<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>订单详情</title>
    <link rel="stylesheet" href="/scriptZIP/indexPlus.css">
    <style scoped>
        body {
            margin: 20px;
            font-family: Arial, sans-serif;
        }

        h2, h3 {
            margin: 10px 0;
        }

        .el-card {
            margin-bottom: 20px;
            padding: 15px;
        }

        .el-table {
            margin-top: 10px;
        }

        .el-row {
            margin-bottom: 20px;
        }

        .el-row:last-child {
            margin-bottom: 0;
        }

        .full-width-table {
            width: 100%;
        }

        [v-cloak] {
            display: none;
        }

        .back-button {
            margin-bottom: 20px;
        }
    </style>
</head>

<body>
    <div id="orderDetailsApp" v-cloak>
        <el-container>
            <el-header>
                <h2>订单详情</h2>
            </el-header>
            <el-main>
                <!-- 返回按钮 -->
                <el-button class="back-button" @click="goBack" type="primary">返回</el-button>

                <!-- 基本信息 -->
                <el-card>
                    <h3>基本信息</h3>
                    <el-row :gutter="20">
                        <el-col :span="12">
                            <el-form-item label="订单类型">
                                <span>{{ order.way === 7 ? "线上" : "线下" }}</span>
                            </el-form-item>
                            <el-form-item label="订单号">
                                <span>{{ order.tradeNo }}</span>
                            </el-form-item>
                            <el-form-item label="订单建立时间">
                                <span>{{ order.time }}</span>
                            </el-form-item>
                            <el-form-item label="类型">
                                <span>{{ order.orderType === 1 
      ? "新签" 
      : order.orderType === 2 
        ? "续费" 
        : order.orderType === 3 
          ? "新签尾款" 
          : "未知类型" }}</span>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="校区名称">
                                <span>{{ order.schoolName }}</span>
                            </el-form-item>
                            <el-form-item label="学员姓名">
                                <span>{{ order.studentName }}</span>
                            </el-form-item>
                            <el-form-item label="联系电话">
                                <span>{{ order.bindCode }}</span>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-card>

                <!-- 课程详情 -->
                <el-card>
                    <h3>课程详情</h3>
                    <el-table :data="order.courseDetailsList" border class="full-width-table">
                        <el-table-column prop="courseName" label="课程名称" width="200"></el-table-column>
                        <el-table-column prop="courseFeeStandard" label="收费标准" width="200"></el-table-column>
                        <el-table-column prop="quantity" label="数量" width="80"></el-table-column>
                        <el-table-column prop="coursePrice" label="总价 (元)" width="120">
                            <template #default="scope">
                                {{ (scope.row.coursePrice / 100).toFixed(2) }}
                            </template>
                        </el-table-column>
                        <el-table-column prop="amount" label="实收 (元)" width="120">
                            <template #default="scope">
                                {{ (scope.row.amount / 100).toFixed(2) }}
                            </template>
                        </el-table-column>
                        <el-table-column prop="msType" label="报读模式" width="100">
                            <template #default="scope">
                                <span>
                                    {{
                                        scope.row.msType === 1 ? "按课时收费" :
                                        scope.row.msType === 2 ? "按月收费" :
                                        scope.row.msType === 3 ? "按天收费" :
                                        scope.row.msType === 4 ? "按季收费" :
                                        scope.row.msType === 5 ? "按期收费" :
                                        scope.row.msType === 6 ? "按课包收费" :
                                        scope.row.msType === 7 ? "按体验收费" :
                                        "未知"
                                    }}
                                </span>
                            </template>
                        </el-table-column>
                        <el-table-column prop="startTime" label="开课时间" width="150"></el-table-column>
                        <el-table-column prop="endTime" label="课程有效期至" width="150"></el-table-column>
                    </el-table>
                </el-card>

                <!-- 经办信息 -->
                <el-card>
                    <h3>经办信息</h3>
                    <el-row :gutter="20">
                        <el-col :span="12">
                            <el-form-item label="经办人">
                                <span>{{ order.handleUser }}</span>
                            </el-form-item>
                            <el-form-item label="业绩归属人">
                                <span>{{ order.performance }}</span>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="收款日期"> 
                                <span>{{ order.handlingDate }}</span>
                            </el-form-item>
                            <el-form-item label="备注信息">
                                <span>{{ order.remark || '无' }}</span>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-card>
            </el-main>
        </el-container>
    </div>

    <script src="/scriptZIP/vue.global.js"></script>
    <script src="/scriptZIP/index.full.js"></script>
    <script src="/scriptZIP/axios.min.js"></script>
    <script>
        const { createApp } = Vue;
       
        createApp({
            data() {
                return {
                    order: {}
                };
            },
            created() {
                const id = this.getParams().id; // 假设通过 URL 参数获取订单 ID
                axios.get(`/pc/order/orderDetails/${id}`).then(response => {
                    this.order = response.data;
                }).catch(error => {
                    console.error("Error fetching order details:", error);
                });
            },
            methods: {
                getParams() {
                    const query = location.search.substring(1);
                    const vars = query.split("&");
                    const params = {};
                    for (let i = 0; i < vars.length; i++) {
                        const pair = vars[i].split("=");
                        params[pair[0]] = decodeURIComponent(pair[1]);
                    }
                    return params;
                },
                goBack() {
                    window.history.back(); // 返回上一页
                }
            }
        }).use(ElementPlus).mount("#orderDetailsApp");
    </script>
</body>

</html>
